<route lang="json5"  type="home">
{
  style: {
    navigationBarTitleText: '登陆页面',
  },
}
</route>

<template>
  <view class="page">
    <image class="bg-blur-1" src="../../static/412.png" />

    <view class="group">
      <view class="background-container">
        <text class="welcome-text">欢迎登陆</text>
        <text class="font account-title">手机号</text>
        <view class="email-display">
          <input v-model="phone" type="text" placeholder="请输入手机号" />
        </view>
        <text class="font account-password">密码</text>
        <view class="email-display2">
          <input v-model="password" type="password" placeholder="请输入密码" style="color: black" />
        </view>
      </view>
    </view>

    <view class="input-container">
      <view class="login-button" @click="loginFn">
        <text class="login-text">登录</text>
      </view>

      <text class="forgot-password" @click="register">注册商户</text>

      <!-- <text class="forgot-password" @click="youke">游客登陆</text> -->
    </view>
  </view>
</template>

<script lang="ts" setup>
import { httpPost } from '@/utils/http'

// 手机号
const phone = ref('')

// 密码
const password = ref('')

const loginFn = async () => {
  uni.showLoading({
    title: '登录中...',
  })
  httpPost('/api/app/user/login/password', { phone: phone.value, password: password.value }).then(
    (res: any) => {
      console.log(res)
      uni.showToast({
        title: '登录成功',
        icon: 'success',
      })

      setTimeout(() => {
        // 把token存本地
        uni.setStorageSync('authorization', res.token)

        // 跳到首页
        uni.redirectTo({
          url: '/pages/index/index',
        })
      }, 500);


    },
  )
}

const youke = () => {
  // 跳到首页
  uni.redirectTo({
    url: '/pages/index/index',
  })
}

/* 注册 */
const register = () => {
  uni.navigateTo({
    url: '/pages/login/register',
  })
}
</script>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(180deg, #ffffff 25.4%, #dcfcea 68.9%);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

.group {
  // padding: 436rpx 40rpx 140rpx;
  position: relative;
}

.font {
  font-size: 32rpx;
  color: #bbbbc4;
}

.account-title {
  margin-top: 80rpx;
  line-height: 30rpx;
}

.account-password {
  margin-top: 40rpx;
  line-height: 30rpx;
}

.password-title {
  margin-top: 140rpx;
  line-height: 30rpx;
}

.background-container {
  margin-top: 130rpx;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
}

.bg-blur-1,
.bg-blur-2 {
  width: 100vw; // 设置为视口宽度
  height: auto; // 或者根据需要设置明确的高度
}

.bg-blur-1 {
  position: absolute;
  left: 200rpx;
  width: 656rpx;
  height: 752rpx;
  opacity: 0.5;
  filter: blur(100rpx);
}

.bg-blur-2 {
  position: absolute;
  left: -350rpx;
  // width: 656rpx;
  // height: 352rpx;
  opacity: 0.5;
  filter: blur(100rpx);
}

.register-button {
  margin-left: 30rpx;
  margin-top: 120rpx;
  width: 150rpx;
  padding: 16rpx;
  border: 2rpx solid #022e57;
  border-radius: 44rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.register-button text {
  color: #022e57;
  font-size: 28rpx;
  line-height: 26.3rpx;
  font-family: HarmonyOSSansSC;
}

.welcome-text {
  left: 42rpx;
  top: 300rpx;
  color: #022e57;
  font-size: 64rpx;
  font-weight: 700;
  line-height: 60.16rpx;
  font-family: HarmonyOSSansSC;
}

.email-display {
  margin-top: 30rpx;
  padding: 36rpx 0 28rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}

.email-display input {
  margin-left: 36rpx;
  color: #08021c;
  font-size: 36rpx;
  line-height: 36rpx;
  font-family: HarmonyOSSansSC;
}

.email-display2 {
  margin-top: 30rpx;
  padding: 36rpx 0 28rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}

.email-display2 input {
  margin-left: 36rpx;
  color: #08021c;
  font-size: 36rpx;
  line-height: 36rpx;
  font-family: HarmonyOSSansSC;
}

.image-wrapper {
  margin-top: 70rpx;
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 40rpx;
  text-align: center;
  width: 100%;

  image {
    height: 100rpx;
    width: 100rpx;
    margin: 20rpx;
  }
}

.input-container {
  margin-top: 40rpx;
  padding: 0 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  position: relative;
  z-index: 999;
}

.login-button {
  width: 100%;
  padding: 30rpx 0;
  background-image: linear-gradient(98.8deg, #fff157 -272.1%, #7eff2e 372.1%);
  border-radius: 16rpx;
  text-align: center;
}

.login-text {
  color: #022e57;
  font-size: 34rpx;
  line-height: 34rpx;
}

.forgot-password {
  margin-top: 50rpx;
  color: #bbbbc4;
  font-size: 32rpx;
}
</style>
